@import 'table.scss';

/**
 * 车辆出入样式文件
 * author aty
 */

// .table tbody tr, .table thead {
//     display: table;
//     width: 100%;
//     table-layout: fixed;
// }

.page-car-out-in{
	color:#fff;
	.table-section{
		width: 70%;
		height: 100%;
		background: url(../img/icon-car-in-out-card.png) left bottom no-repeat;
		background-size: 100% 100%;
	}

	.left-box{
		width: calc(30% - 10px);
		height: 100%;
		margin-left: 10px;

		.top-section{
			width: 100%;
			height: calc(50% - 5px);
		}
		.bottom-section{
			width: 100%;
			height: 49%;
			margin-top: 12px;
		}

		.card{
			background: url(../img/out-and-in.png) left bottom no-repeat;
			background-size: 100% 100%;
		}
	}

	.card-header{
		display: flex;
		height: 36px;
		align-items: center;
		justify-content: space-between;
		padding-left:10px;
		font-weight: 300;
		font-family: emoji;
		.tools{
			height: 40px;
			margin-top: -36px;
		}
	}

	.card-content{
		width: calc(100% - 20px);
		margin-left: 10px;
		height: calc(100% - 100px);
	}
	
	.video-box{
		background:#02090c;
		width: calc(100% - 40px);
		margin-left: 20px;
		height: calc(100% - 86px);
		margin-top: 20px;
		font-size: 40px;
		font-weight: 300;
		color:rgba(255,255,255,0.2);
		font-family: cursive;
	}
	.pagination-section{
		width: 100%;
		height: 60px;
	}

	.date-input{
		width: 206px;
		height: 30px;
		background:#42566E;
		border-radius: 0px 7px 7px 0px;
		overflow: hidden;
		position:relative;
		cursor: pointer;

		input{
			width: 100%;
			height: 100%;
			background:none;
			outline: none;
			border:none;
			padding:0 10px;
			color:#fff;
		}

		&:after{
			content: "";
			position: absolute;
			width: 46px;
			height: 100%;
			background: url(../img/date.png) #0071F9 center  no-repeat;
			background-size: 20px auto;
			top:0;
			right: 0;
		}
	}
}


/**
 * 弹出框样式
 */
.dialog-box{
	position: fixed;
	z-index: 999;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0,0,0,0.7);
}
.bg-black{
	background: #1B1B1B;
}
.dialog-wrapper{
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.dialog-container{
	width: 500px;
	height: 400px;
	background: #273F8E;
	border-radius: 15px;
	padding:10px 20px;
	position:relative;
	.icon-close{
		position:absolute;
		top:-19px;
		right: -24px;
		z-index: 9;
		background:red;
		width: 30px;
		height: 30px;
		background:url("../img/open.png")center center no-repeat;
		background-size:20px auto;
		cursor: pointer;
	}

	.dailog-box{
		width: 90%;
		margin-left: 5%;
		height: 90%;
		margin-top: 3.6%;
		position:relative;

		.prev-btn,
		.next-btn{
			position:absolute;
			left: 0;
			height: 50px;
			width: 30px;
			top:calc(50% - 25px);
			z-index: 4;
			background:url("../img/prev-img.png") rgba(0,0,0,0.6) center center no-repeat;
			background-size:20px auto;
			cursor: pointer;
			display: none;
		}
		.next-btn{
			left: unset;
			right: 0;
			background:url("../img/next-img.png") rgba(0,0,0,0.6) center center no-repeat;
			background-size:20px auto;
		}

		.vehicle-header{
			height: 40px;
			.vehicle-name{
				padding-left:26px;
				background: url("../img/icon-vehicle.png") left center no-repeat;
				background-size:20px auto;
			}
		}
		.img-list{
			height: calc(100% - 40px);
			background: yellow;
			overflow: hidden;

			ul{
				height: 100%;
				width: 100%;
				overflow: hidden;
				display: flex;
				transition: transform 0.3s;
				li{
					width: 50%;
					height: 100%;
					height: 100%;

					img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

}

.dialog-header{
	height: 50px;
	border-bottom: 1px solid #000000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
}
.dialog-header .icon-close{
	cursor: pointer;
	font-size: 20px;
	transition: all 0.3s;
}
.dialog-header .icon-close:hover{
	transform: rotate(-90deg);
}
.dialog-body{
	height: calc(100% - 50px);
	position: relative;
	display: flex;
}
.page-car-out-in .table-section{
	position: relative;
  }
	.page-car-out-in .card-content{
	  overflow: hidden;
	  overflow-y: auto;
	  
	}
	.table {
	  width: 100%;
	  height: 100%;
	  border-collapse: collapse;
	  display: table;
	  position: relative;
	}

	.tr {
	  display: inline-block;
	  height: 60px;
	}

	.table thead {
	  background: none;
	} 

	.theadtr {
	  background: #133297;
	}
	.tablecall{
	  position: absolute;
	  top: 36px;
	  left: 10px;
	  width: calc(100% - 20px);
	  display: none;
	  height: 0;
	  z-index: 20;
	}

	.table td {
	  position: relative;
	}

	.table tbody {
	  display: table;
	  height: calc(100% - 46px);
	  overflow-y: auto;
	  width: 100%;
	}

	.table tbody tr,
	.table .thead {
	 
	  width: 100%;
	  table-layout: fixed;
	}
	.table tbody tr{
	  display: revert;
	}
	.table .thead {
	  display: table;
	}

	.table td.no,
	.table th.no {
	  width: 60px;
	}

	.table td.time,
	.table th.time {
	  width: 140px;
	}
	.table th,.table td{
	  width: calc(100% / 9 );
	}
	.table .borderright{
	  border-right: 1px solid #173cac;
	}

	
